﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2> 添加商品 </h2>
@* {
  "id": 0,
  "code": "string",
  "name": "string",
  "imgUrl": "string",
  "description": "string",
  "price": 0,
  "stock": 0,
  "status": 0,
  "createTime": "2024-09-19T08:49:52.829Z",
  "updateTime": "2024-09-19T08:49:52.829Z",
  "isDeleted": true
} *@
<table class="layui-table">
    <tr>
        <td>商品名称</td>
        <td> <input type="text" id="name" value="" /> </td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td>    @* 2.假装这里有图片 *@
            <input type="text" id="imgUrl" hidden />

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2" lay-options="{
    accept: 'file',
    exts: 'zip|rar|7z|jpg'
  }">
                    <i class="layui-icon layui-icon-upload"></i> 多图片上传
                </button>
                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
                    预览图：
                    <div class="layui-upload-list" id="upload-demo-preview"></div>
                </blockquote>
            </div>
        </td>
    </tr>
    <tr>
        <td>商品描述</td>
        <td>    <textarea id="description"></textarea>   </td>
    </tr>
    <tr>
        <td>商品价格</td>
        <td> <input type="text" id="price" value="" /> </td>
    </tr>
    <tr>
        <td>商品库存</td>
        <td> <input type="text" id="stock" value="" /> </td>
    </tr>
    <tr>
        <td>商品库存</td>
        <td> <input type="text" id="needJifen" value="" /> </td>
    </tr>
    <tr>
        <td>状态</td>
        <td>
            <select id="status">
                <option value="0">请选择</option>
                <option value="1">上架</option>
                <option value="2">下架</option>
            </select>

        </td>
    </tr>
    <tr>
        <td></td>
        <td> <input type="button" id="btnok" value="添加商品" onclick="AddProduct()" /> </td>
    </tr>
</table>

<script>
    //添加商品的函数
    function AddProduct() {
        var name = $("#name").val();
        var price = $("#price").val();
        var imgUrl = $("#imgUrl").val();//真的有了
        var stock = $("#stock").val();
        var status = $("#status").val();
        var description = $("#description").val();
        var needJifen = $("#needJifen").val();

        


        var obj = {
            id: 0,
            "code": "",
            "name": name,
            "imgUrl": imgUrl,
            "description": description,
            "price": price,
            "stock": stock,
            "status": status,
            "createTime": "2024-09-19T08:49:52.829Z",
            "updateTime": "2024-09-19T08:49:52.829Z",
            "isDeleted": false,
            "needJifen": needJifen
        };

        $.ajax({
            url: 'https://localhost:7061/api/Product/AddProduct',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify(obj),
            success: function (res) {
                console.log(res);
                if (res > 0) {
                    alert("添加成功!")
                    location.href = '/product/list';
                } else { 
                    alert("添加失败!")
                }
            }
        });

    }

    function SP() {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 多图片上传
        upload.render({
            elem: '#ID-upload-demo-btn-2',
            url: '/home/TPSP', // 实际使用时改成您自己的上传接口即可。 报 200
            multiple: true,
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')
                });
            },
            done: function (res) {
                // 上传完毕
                // …
                //  {"msg":"上传成功!","imgUrl":"/imgs/e75cf611-fb3e-43f1-a75d-55086d613d5b1.png"}

                $("#imgUrl").val(res.imgUrl);//把上传完成的图片路径赋值给隐藏的文本框

                alert(res.msg);
            }
        });
    }

    $(function () { 
        SP();
    });

</script>